<template>
  <main class="home_main">
    <div class="home_main_top">
      <el-select v-model="value" :placeholder="value">
        <el-option
          v-for="item in college"
          :key="item.collegeId"
          :label="item.collegeName"
          :value="item.collegeName"
        ></el-option>
      </el-select>
      <span class="plateName">{{value}}</span>
      <span class="count">(帖子：{{postCount}}---回复：{{replyCount}})</span>
    </div>
    <div class="home_main_middle">
      <div class="left">
        <el-tabs v-model="activeName">
          <el-tab-pane label="全部帖子" name="all">
            <i class="el-icon-loading" v-if="isLoad" style="font-size:40px;margin:130px 250px;"></i>
            <Post
              v-for="(item,index) in postinfo"
              :key="index"
              :postInfo="item"
              :username="username"
              v-show="isPost"
            ></Post>
          </el-tab-pane>
          <el-tab-pane label="精华帖" name="jinghua">
            <Post
              v-for="(item,index) in postinfo"
              :key="index"
              :postInfo="item"
              :username="username"
            ></Post>
          </el-tab-pane>
        </el-tabs>
        <el-pagination
          :hide-on-single-page="true"
          background
          layout="prev, pager, next"
          :total="pages"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
      <div class="right">
        <div class="postingBtn">
          <el-button type="primary" icon="el-icon-edit">
            <router-link tag="a" to="/home/add">发布帖子</router-link>
          </el-button>
        </div>
        <div class="ranking">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>积分排行榜</span>
            </div>
            <div v-for="(item,index) in ranking" :key="index" class="text item rankingInfo">
              <div class="rank">{{index+1}}</div>
              <router-link
                tag="a"
                :to="{path:item.userName===username?'/usercenter':'/centerT',query:{id:item.userName}}"
              >
                <el-avatar :src="item.imgUrl" size="small" style="margin-left:20px;"></el-avatar>
              </router-link>
              <div class="name">{{item.userName}}</div>
              <div class="integ">{{item.count}}</div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
import Post from './post.vue'
export default {
  props: ['username'],
  data() {
    return {
      activeName: 'all', // 帖子标记
      college: [], // 部门
      postCount: 0, // 帖子数量
      replyCount: 0, // 回复数量
      ranking: '',
      value: '信息工程', // option的value
      isLoad: true,
      postinfoAll: [], // 全部帖子信息
      jinghuaPost: [], // 精华帖
      postinfo: [], // 帖子信息
      pages: 0, // 总页数
      isPost: true,
      currentPage: 1 // 当前页
    }
  },
  methods: {
    // 获取帖子信息
    async getpostinfo(id, type) {
      const postRes = await this.$http.get('/getpostinfo/' + id)
      if (postRes.meta.status !== 200) {
        return this.$Message.error('获取帖子信息失败')
      }
      var data = postRes.data.reverse()
      if (type === 'jinghua') {
        data = data.filter(item => {
          return item.type === '1'
        })
      }
      console.log(data)
      for (var item of data) {
        await this.comm.getuserImg(item.publisher, this).then(img => {
          item.imgUrl = img
        })
      }
      this.postinfoAll = data
      this.postinfo = this.getPagesFun(data)
      // 帖子数量
      this.postCount = data.length
      this.replyCount = 0
      if (data.length) {
        // 帖子评论量
        data.forEach(item => {
          this.replyCount += parseInt(item.commentCount)
        })
      }
    },
    // 截取数组的前6个
    getPagesFun(arr) {
      // 多少页
      var page = Math.ceil(arr.length / 6)
      // 总页数
      this.pages = page * 10
      return arr.slice(0, 6)
    },
    // 页码改变
    handleCurrentChange(val) {
      window.sessionStorage.setItem('pageActive', val)
      this.$emit('toTop', 1)
      this.postinfo = this.postinfoAll.slice((val - 1) * 6, val * 6)
      // console.log(this.postinfoAll.slice((val - 1) * 6, val * 6))
    }
  },
  created() {
    this.comm.getcollege(this).then(data => {
      this.isLoad = false
      this.college = data
      // 当前版块
      var collegeName = window.sessionStorage.getItem('collegeName')
      // 当前页数
      var pageActive = window.sessionStorage.getItem('pageActive')
      // 当前帖类
      var postType = window.sessionStorage.getItem('postType')
      if (collegeName && pageActive && postType === 'all') {
        var collegeId = data.filter(item => {
          return item.collegeName === collegeName
        })[0].collegeId
        this.value = collegeName
        this.getpostinfo(collegeId).then(() => {
          if (pageActive !== '1') {
            this.currentPage = parseInt(pageActive)
            this.handleCurrentChange(pageActive)
          }
        })
      } else if (collegeName && pageActive && postType === 'jinghua') {
        this.activeName = 'jinghua'
      } else {
        window.sessionStorage.setItem('collegeName', this.value)
        window.sessionStorage.setItem('pageActive', '1')
        window.sessionStorage.setItem('postType', 'all')
        this.getpostinfo(0)
      }
    })
    // 获取积分排行
    this.comm.getUserList(0).then(datas => {
      datas.slice(0, 6)
      datas.forEach(item => {
        item.count = this.comm.integSum(item.integ)
      })
      datas = datas.sort((a, b) => {
        return -a['count'] + b['count']
      })
      this.ranking = datas
    })
  },
  components: {
    Post
  },
  watch: {
    value: function(val, oval) {
      this.activeName = 'all'
      var id = null
      this.college.forEach(item => {
        if (item.collegeName === val) {
          this.postCount = item.postCount
          this.replyCount = item.replyCount
          id = item.collegeId
        }
      })

      window.sessionStorage.setItem('pageActive', '1')
      window.sessionStorage.setItem('collegeName', val)
      this.getpostinfo(id).then(() => {
        this.isPost = false
        this.isPost = true
      })
    },
    activeName: function(val) {
      console.log(val)
      var collegeName = window.sessionStorage.getItem('collegeName')
      var collegeId = this.college.filter(item => {
        return item.collegeName === collegeName
      })[0].collegeId
      window.sessionStorage.setItem('postType', val)
      if (val === 'jinghua') {
        this.getpostinfo(collegeId, 'jinghua')
      } else {
        this.getpostinfo(collegeId)
      }
    }
  },
  mounted() {
    // var collegeId = this.college.filter(item => {
    //   return item.collegeName === window.sessionStorage.getItem('collegeName')
    // })
  }
}
</script>
<style lang="less" scoped>
.home_main {
  width: 94%;
  margin: 0 auto;
  background-color: #fafafc;
  .home_main_top {
    display: flex;
    margin: 20px 0;
    line-height: 40px;
    .el-select {
      width: 110px;
    }
    .plateName {
      margin-left: 20px;
      font-size: 20px;
    }
    .count {
      margin-left: 10px;
      font-size: 14px;
      color: #565b69;
      white-space: pre;
    }
  }
  .home_main_middle {
    display: flex;
    width: 100%;
    height: 800px;
    .left {
      position: relative;
      width: 72%;
      height: 780px;
      margin: 0 auto;
      text-align: center;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      .el-tabs {
        margin: 10px 20px;
      }
      .el-pagination {
        margin-top: 40px;
      }
    }
    .right {
      width: 25%;
      margin-left: 20px;
      height: 600px;
      .postingBtn {
        width: 100%;
        height: 100px;
        margin: 0 atuo;
        text-align: center;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        .el-button {
          margin-top: 25px;
          width: 190px;
          background-color: #36f;
          a {
            color: #fff;
          }
        }
      }
      .ranking {
        width: 100%;
        min-height: 400px;
        margin-top: 20px;
        .el-card {
          .rankingInfo {
            display: flex;
            margin: 0 auto 20px;
            text-align: center;
            .rank {
              color: red;
            }
            .integ {
              margin-left: auto;
            }
          }
        }
      }
    }
  }
}
</style>
